<template>
	<div :bordered="false" class="widget">
		<div class="statisitic-box">
			<el-statistic :value="value" :value-style="{ fontWeight: 800 }">
				<template #title>
					<div style="display: inline-flex; align-items: center; font-size: 14px">
						{{ title }}
					</div>
				</template>
			</el-statistic>
			<div :style="{ color: state == 1 ? '#75f654' : state == 0 ? '#bfbfbf' : '#c63520' }">{{ suffix }}</div>
		</div>
		<div class="icon">
			<el-image style="width: 100%; height: 100%" :src="state == 1 ? top : state == 0 ? ping : down" />
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import shangsheng from "@/assets/images/shangsheng.png";
import xiajiang from "@/assets/images/xiajiang.png";
import pingwen from "@/assets/images/pingwen.png";
export default defineComponent({
	name: "Widget1",
	props: {
		title: {
			type: String,
			default: ""
		},
		value: {
			type: Number,
			default: 0
		},
		suffix: {
			type: String,
			default: ""
		},
		state: {
			type: Number,
			default: 0
		}
	},
	setup() {
		const top = ref(shangsheng);
		const down = ref(xiajiang);
		const ping = ref(pingwen);
		return {
			top,
			down,
			ping
		};
	}
});
</script>
<style lang="scss">
// Base Colors
$color-primary: #1890ff;
$color-secondary: #b37feb;
$color-success: #52c41a;
$color-warning: #fadb14;
$color-danger: #f5222d;
$color-dark: #141414;
$color-white: #ffffff;
// / Base Colors

// Neutral Colors
$color-gray-1: #ffffff;
$color-gray-2: #fafafa;
$color-gray-3: #f5f5f5;
$color-gray-4: #f0f0f0;
$color-gray-5: #d9d9d9;
$color-gray-6: #bfbfbf;
$color-gray-7: #8c8c8c;
$color-gray-8: #595959;
$color-gray-9: #434343;
$color-gray-10: #262626;
$color-gray-11: #1f1f1f;
$color-gray-12: #141414;
$color-muted: $color-gray-7;
// / Neutral Colors

// Font Weights
$fw-regular: 400;
$fw-semibold: 600;
$fw-bold: 700;
// / Font Weights

// Font Family
$f-family: "open sans", Helvetica, Arial, sans-serif;
// / Font Family

// Responsive Breakpoints
$xs: 480px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;
// / Responsive Breakpoints

// Ant Design Vars
$btn-height-base: 40px;
$btn-height-lg: 48px;
$btn-height-sm: 34px;
$btn-padding-base: 0px 15px;
$btn-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
$btn-border-radius-base: 6px;
$btn-font-size-base: 12px;
$btn-font-size-lg: 16px;
$btn-font-size-sm: 12px;
$btn-font-weight: $fw-bold;
$input-color: $color-gray-7;
$input-border-color: $color-gray-5;
$input-hover-border-color: $color-primary;
$input-height-base: $btn-height-base;
$input-height-lg: $btn-height-lg;
$input-height-sm: $btn-height-sm;
$select-color: $color-gray-7;
$select-border-color: $color-gray-5;
$select-hover-border-color: $color-primary;
// / Ant Design Vars

// Template Vars
$shadow-0: none;
$shadow-1: 0px 20px 27px rgba(0, 0, 0, 0.05);
$shadow-2: 0px 4px 6px rgba(0, 0, 0, 0.12);
$shadow-3: 0px 5px 10px rgba(0, 0, 0, 0.12);

$submenu-links-p: 10px 16px;
// / Template Vars

.widget {
	border-radius: 12px;
	box-shadow: $shadow-1;
	background-color: #fff;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px;
	.statisitic-box {
		display: flex;
		flex-direction: column;
	}
	.icon {
		width: 48px;
		height: 48px;
		// background-color: $color-primary;
		align-self: flex-end;
		border-radius: 8px;
		// box-shadow: $shadow-2;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
}
</style>
